<template>
  <div class="container">
    <div class="cheader2">
      <van-icon
        @click="goBack"
        class="chl"
        name="arrow-left"
        color="#000"
        size="20"
      />
      <div class="chtitle">修改授权地址</div>
      <div class="djbox"></div>
    </div>
    <div class="ibox2">
      <div class="tips">
        <div class="t1">旧地址: {{ handleAddressString(infos.address) }}</div>
        <div class="t1" style="font-weight: 600">
          新地址: {{ handleAddressString(currentAddress) }}
        </div>
      </div>
      <div class="ili">
        <div class="ili-1">邮箱验证码</div>
        <div class="ili-2">
          <van-field
            v-model="submitForm.verificationCode"
            placeholder="请输入验证码"
            :border="false"
          />
          <span class="fasong" @click="sendEmailCode">{{ emailText }}</span>
        </div>
      </div>
      <div class="ili">
        <div class="ili-1">资金密码</div>
        <div class="ili-2">
          <van-field
            v-model="submitForm.password"
            type="password"
            placeholder="请输入资金密码"
          />
        </div>
      </div>
    </div>
    <div
      :class="currentAddress === infos.address ? 'btn jinyong' : 'btn'"
      @click="handleSubmit"
    >
      修改地址
    </div>
    <div class="btip">提示: 地址修改完成将会重新登录</div>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref, onMounted,computed } from "vue";
import { useRouter } from "vue-router";
import http from "@/utils/http";
import { Toast } from "vant";
import { useStore } from "@/store";
const store = useStore();
const router = useRouter();
const infos = store.state.users.infos;
const currentAddress = computed(()=>store.state.users.currentAddress);
const emailText = ref<number | string>("发送");
const submitForm = reactive({
  address: currentAddress.value,
  signature: "",
  password: "",
  verificationCode: "",
});
onMounted(() => {
  store.dispatch("users/getCurrentEthAddress");
  (window as any).ethereum.on("accountsChanged", function (accounts) {
    console.log(accounts[0])
    store.commit('users/updateCurrentAddress',accounts[0])
  });
});
const sendEmailCode = () => {
  if (emailText.value === "发送") {
    emailText.value = 60;
    const timer = setInterval(() => {
      if (emailText.value <= 0) {
        emailText.value = "发送";
        clearInterval(timer);
        return;
      }
      (emailText.value as number) -= 1;
    }, 1000);
    store
      .dispatch("users/sendEmailCode", {
        email: infos.email,
        type: 5,
      })
      .then((res: any) => {
        Toast(res.msg || res.data);
      });
  }
};
const handleSubmit = () => {
  if (currentAddress.value === infos.address) {
    return;
  }
  if (!submitForm.verificationCode) {
    Toast("请输入验证码"); 
    return;
  }
  if (!submitForm.password) {
    Toast("请输入资金密码");
    return;
  }
  store.dispatch("users/signEditAddress").then((res: any) => {
    if (res !== false && res) {
      submitForm.signature = res.signature;
      http.put("user/user/address", submitForm).then((res: any) => {
        if (res.code === 0) {
          Toast("修改地址成功, 重新登录");
          setTimeout(() => {
            store.commit("users/clearToken");
            router.push("/login");
          }, 1500);
        }
      });
    }
  });
};
const handleAddressString = (address: string) => {
  return (
    address.substring(0, 8) +
    "******" +
    address.substring(address.length - 8, address.length)
  );
};
const goBack = () => {
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.cheader2 {
  z-index: 1001;
  width: 100%;
  height: 45px;
  background-color: #fff;
  font-size: 16px;
  color: #000;
  position: fixed;
  top: 0;
  left: 0;
  .chl {
    position: absolute;
    left: 16px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
  }
  .chtitle {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .djbox {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    img {
      width: 16px;
      margin-right: 4px;
    }
    div {
      font-size: 13px;
      color: #878b97;
    }
  }
}
.ibox2 {
  padding-top: 20px;
  margin: 45px 20px;
  .tips {
    padding: 10px 20px;
    background-color: #f1f1f1;
    margin: 0px auto 20px;
    border-radius: 4px;
    .t1 {
      font-size: 12px;
      color: #333;
      &:first-child {
        margin-bottom: 10px;
      }
    }
  }
  .ili {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    .ili-1 {
      font-size: 12px;
      color: #000;
      margin-bottom: 10px;
    }
    .ili-2 {
      background-color: #f1f1f1;
      border-radius: 4px;
      height: 38px;
      position: relative;
      .fasong {
        font-size: 13px;
        color: #36b4ea;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 999;
      }
    }
  }
}
.btn {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  background: #36b4ea;
  border-radius: 3px;
  width: calc(100% - 40px);
  margin: 40px auto 10px;
}
.jinyong {
  background-color: #dfdfdf;
  color: #888;
}
.btip {
  font-size: 12px;
  color: #878b97;
  text-align: right;
  padding-right: 20px;
}
</style>